<template>
	<a-select show-search v-model:value='v' :filter-option="filterOption" :show-arrow="false" v-bind='attr' :options='options' @change='change'></a-select>
</template>
<script setup lang='ts'>
	import {
		ref
	} from 'vue';

    import { searchStockApi } from '@/api/stock'

	const { value, type, ...attr} = withDefaults(defineProps<{
        value:number|string,
        type : number,
        [key:string] : any
	}>(), {
	    
	})

    const emit = defineEmits<{
        (e : 'update:value', keyword : string|number),
        (e : 'change', value : any)
    }>()


    const v = ref<string | number | undefined>(value)

	const options = ref < any[] > ([])

    const filterOption = (input: string, option: any) => {
        const key = input.toLowerCase()
        return option.label.toLowerCase().indexOf(key) >= 0 || option.value.toLowerCase().indexOf(key) >= 0
    };

    function change(e) {
        console.log('选择到的股票', e)
        emit('update:value', e)
        if(!e) {
            emit('change', null)
        }else {
            for(let i = 0; i < options.value.length; i ++) {
                const option = (options.value)[i]
                if(e == option.value) {
                    emit('change', {[option.value] : option.label})
                    break
                }
            }
        }
        
    }

    searchStockApi(type).then(data => {
        if(data) {
            for(let k in data) {
                options.value.push({
                    value : k,
                    label : data[k]
                })
            }
        }
        
    })
</script>
